var username = "xiaowang";
var password = "xiaowang123@!";

function check() {
    // alert("调用了检查函数");
    var username = document.getElementById('username');
    console.log(username.value);
    if(username.value == '') {
        // alert("小子，你还没有输入用户名");
        // document.getElementById('username_valid').style.display = "none";
        // document.getElementById('username_invalid').style.display = "block";

        setInputNotice("username_valid", "none", '');
        setInputNotice("username_invalid", "block");
    } else {
        if (username.value == username) {
            setInputNotice("username_invalid", "none", '');
            setInputNotice("username_valid", "block", '');
        } else {
            setInputNotice("username_valid", "none", '');
            setInputNotice("username_invalid", "block", '');
        }
    }
}

// 如果编程的 一定要有封装的思维
// 什么意思呢？就是我们发现有很多重复性的代码的时候，就要想到封装成函数
// 通过函数调用,实现代码的复用
// 编程风格 驼峰命名规则  ==> 望文生义

/**
 * 设置输入框检查提示
 * @param {string} idName id的名字
 * @param {string} value  属性值 none | block
 */
function setInputNotice(idName, value, msg) {
    var node = document.getElementById(idName);
    node.style.display = value;
    if (msg != '') {
        node.innerText = msg;
    }
}